<template>
  <div id="role">
    <div class="operation">
      <div class="buttons">
        <el-button type="primary" @click="AddButton">新增</el-button>
        <el-button type="primary">导入</el-button>
      </div>
      <!-- <div class="inputs">
        111111111111111
        33333
        222222222222222
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="UsingStatus" />启用
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="StopStatus" />禁用
        </div>
        <div style="margin-right:30px;">
          <input type="checkbox" :checked="DeleteStatus" />已删除
        </div>
        <div class="check" style="margin-right:30px;">
          <input type="text" placeholder="请输入搜索关键字" v-model="InputValue" />
          <i class="iconfont icon-sousuo"></i>
        </div>
        <div>
          <i class="iconfont icon-shuaxin" style="margin-right:0px;" @click="ToReload"></i>
        </div>
      </div>-->
    </div>
    <div class="AllStru">
      <div class="tablebox">
        <div class="boxtop">基本信息</div>
        <!-- 表格 -->
        <el-table
          :data="roledata"
          :header-cell-style="{background:'#F5F5F5'}"
          show-overflow-tooltip
          v-if="AllType=='1'"
          @row-click="ClickRow"
        >
          <!-- <el-table-column
            prop="UState"
            label="状态"
            align="center"
            width="100"
            :show-overflow-tooltip="true"
          ></el-table-column>-->
          <el-table-column
            prop="RName"
            label="角色名"
            align="center"
            width
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="ClickEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="ClickDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="CurrentPage" v-if="AllType == '1'">
          <el-pagination
            :hide-on-single-page="true"
            :page-size="pagesize"
            :pager-count="9"
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change"
          ></el-pagination>
        </div>
        <!-- 新增 -->
        <div v-if="AllType=='2'" style="height:45px;line-height:45px;margin-top:20px;">
          角色名称:
          <el-input
            style="width:300px;margin-left:20px;"
            v-model="InputOneValue"
            placeholder="请输入角色名称"
          ></el-input>
        </div>
        <div v-if="AllType=='2'" style="height:45px;line-height:45px;margin-top:20px;">
          描述:
          <el-input
            style="width:300px;margin-left:52px;"
            v-model="InputTwoValue"
            type="textarea"
            placeholder="请输入对角色的描述"
          ></el-input>
        </div>
        <!-- 编辑 -->
        <div v-if="AllType=='3'" style="height:45px;line-height:45px;margin-top:20px;">
          角色名称:
          <el-input style="width:300px;margin-left:20px;" v-model="InputThreeValue"></el-input>
        </div>
        <div v-if="AllType=='3'" style="height:45px;line-height:45px;margin-top:20px;">
          描述:
          <el-input style="width:300px;margin-left:52px;" v-model="InputFourValue" type="textarea"></el-input>
        </div>
      </div>
      <div class="AllRight">
        <div class="RightPermission">
          <div class="PermissionTop">模块</div>
          <div class="PermissionData">
            <div
              class="DataOne"
              v-for="(item,index) in AllCheckArr"
              :key="index"
              @click="GetNewdata(item,index)"
            >
              <div style="position:relative;">
                {{item.PName}}
                <el-checkbox
                  style="position:absolute;right:30px;"
                  @change="ChangeOne(item)"
                  v-model="item.CheckValue"
                  :disabled="AllType == '1'"
                ></el-checkbox>
              </div>
            </div>
          </div>
        </div>
        <div class="RightControls">
          <div class="ControlsTop">控件</div>
          <div class="ControlsData">
            <template v-if="AllCheckArr.length>0&&AllCheckArr[OneIndex].children">
              <div
                class="DataTwo"
                v-for="(item,index) in AllCheckArr[OneIndex].children"
                :key="index"
                @click="GetControls(item,index)"
              >
                <div style="position:relative;">
                  {{item.PName}}
                  <el-checkbox
                    style="position:absolute;right:30px;"
                    @change="ChangeTwo(item)"
                    v-model="item.CheckValue"
                    :disabled="(AllType == '1'||!OneDisabled)&& AllType != '3'"
                  ></el-checkbox>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="RightChecks">
          <div class="CheckTop"></div>
          <div class="WidBoxs" style="margin-top:20px;position:relative;">
            <div style="height:45px;line-height:45px;margin-top:15px;margin-left:20px;">数据列</div>
            <div style="line-height:45px;margin-left:20px;">
              <el-checkbox-group v-model="checkedColumn" @change="handleCheckedCitiesChangeTwo">
                <template
                  v-if="AllCheckArr.length>0&&AllCheckArr[OneIndex].children.length>0&&AllCheckArr[OneIndex].children[TwoIndex].children"
                >
                  <el-checkbox
                    v-for="(item,index) in AllCheckArr[OneIndex].children[TwoIndex].children"
                    :label="item.PName"
                    :key="index"
                    :disabled="(AllType == '1'||!TwoDisabled)&& AllType != '3'"
                  >{{item.PName}}</el-checkbox>
                </template>
              </el-checkbox-group>
            </div>
            <el-checkbox
              style="position:absolute;left:140px;top:28px"
              @change="handleCheckAllChangeTwo"
              v-model="CheckAllTwo"
              :disabled="(AllType == '1'||!TwoDisabled)&& AllType != '3'"
            >全选</el-checkbox>
          </div>
          <div class="WidBoxs" style="margin-top:20px;position:relative;">
            <div style="height:45px;line-height:45px;margin-top:15px;margin-left:20px;">数据行</div>
            <div style="line-height:45px;margin-left:20px;">
              <el-checkbox-group v-model="checkedLine" @change="handleCheckedCitiesChangeThree">
                <template
                  v-if="AllCheckArr.length>0&&AllCheckArr[OneIndex].children.length>0&&AllCheckArr[OneIndex].children[TwoIndex].children"
                >
                  <el-checkbox
                    v-for="(item,index) in AllCheckArr[OneIndex].children[TwoIndex].children01"
                    :label="item.PName"
                    :key="index"
                    :disabled="(AllType == '1'||!TwoDisabled)&& AllType != '3'"
                  >{{item.PName}}</el-checkbox>
                </template>
              </el-checkbox-group>
            </div>
            <el-checkbox
              style="position:absolute;left:140px;top:28px"
              @change="handleCheckAllChangeThree"
              v-model="CheckAllThree"
              :disabled="(AllType == '1'||!TwoDisabled)&& AllType != '3'"
            >全选</el-checkbox>
          </div>
          <!-- 按钮 -->
          <div style="margin-top:100px;margin-left:50px;text-align:left" v-if="AllType!='1'">
            <el-button type="primary" @click="ClickDeter">确认</el-button>
            <el-button type="primary" style="margin-left:50px;" @click="ClickCancel">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      total: 0,
      currentPage: "1",
      pagesize: 10,
      AllType: "1", //1为查看  2为新增   3为编辑
      InputOneValue: "",
      InputTwoValue: "",
      InputThreeValue: "",
      InputFourValue: "",
      OriginState: true,
      InputValue: "",
      roledata: [],
      MessageData: [],
      Operations: [],
      checkedOperetions: [],
      StateColumn: [],
      checkedColumn: [],
      StateLine: [],
      checkedLine: [],
      CheckAllTwo: false,
      CheckAllThree: false,
      AllArr: [],
      ModulePId: null,
      ControlsPId: null,
      AllPId: [],
      AllCheckArr: [],
      ClickRId: null, //记录编辑角色的RId
      ClickRName: null, //记录编辑角色的RName
      AllCheckPId: [], //编辑时存在PId的数组,
      OneIndex: 0,
      TwoIndex: 0,
      OneDisabled: false,
      TwoDisabled: false,
      MouduleArr01: [],
      MouduleArr02: [],
      MouduleArr03: [],
      MouduleArr04: []
    };
  },
  methods: {
    //点击表格行
    ClickRow(row, column, event) {
      this.OneIndex = 0;
      this.TwoIndex = 0;
      let json = {
        MN: "QueryRolePermission",
        DataContent: {
          RId: row.RId,
          PType: "1"
        }
      };
      this.MIX_send(json);
    },
    //点击模块的每一条
    GetNewdata(e, index) {
      this.OneIndex = index;
      this.TwoIndex = 0;
      if (this.AllType == "1") {
        let json = {
          MN: "QueryRoleButtonPermission",
          DataContent: {
            RId: e.RId,
            PId: e.PId,
            PType: "2"
          }
        };
        this.MIX_send(json);
      } else if (this.AllType == "2") {
        if (this.AllCheckArr[this.OneIndex].children.length <= 0) {
          this.ModulePId = e.PId;
          let json = {
            MN: "QueryButtonPermissionByType",
            DataContent: {
              PId: e.PId,
              PType: "2"
            }
          };
          this.MIX_send(json);
        }
      }
    },
    //点击控件的每一条
    GetControls(e, index) {
      this.TwoIndex = index;
      this.CheckAllTwo = false;
      this.CheckAllThree = false;
      if (this.AllType == "1") {
        let json_one = {
          MN: "QueryDataPermissionByType",
          DataContent: {
            PId: e.PId
          }
        };
        this.MIX_send(json_one);
        let json_two = {
          MN: "QueryRoleDataPermission",
          DataContent: {
            RId: e.RId,
            PId: e.PId
          }
        };
        this.MIX_send(json_two);
      } else if (this.AllType == "2") {
        let chil01 = this.AllCheckArr[this.OneIndex].children[this.TwoIndex]
          .children;
        let chil02 = this.AllCheckArr[this.OneIndex].children[this.TwoIndex]
          .children01;
        if (chil01 && chil02 && chil01.length <= 0 && chil02 <= 0) {
          let json = {
            MN: "QueryDataPermissionByType",
            DataContent: {
              PId: e.PId
            }
          };
          this.MIX_send(json);
        }
      }
    },
    ToReload() {
      this.$router.go(0);
    },
    //勾选模块
    ChangeOne(r) {
      if (!r.CheckValue) {
        this.ChooeseCael(true);
        this.OneDisabled = false;
      } else {
        this.OneDisabled = true;
      }
    },
    //勾选控件
    ChangeTwo(r) {
      if (!r.CheckValue) {
        this.ChooeseCael();
        this.TwoDisabled = false;
      } else {
        this.TwoDisabled = true;
      }
    },
    // 父级的勾选控制所有子级
    ChooeseCael(level = false) {
      let arr = this.AllCheckArr;
      arr.forEach((item01, index01) => {
        if (this.OneIndex == index01) {
          if (item01.children && item01.children.length > 0) {
            item01.children.forEach((item02, index02) => {
              if (this.TwoIndex == index02 || level) {
                item02.CheckValue = false;
                if (item02.children && item02.children.length > 0) {
                  item02.children.forEach(item03 => {
                    item03.CheckValue = false;
                  });
                }
                if (item02.children01 && item02.children01.length > 0) {
                  item02.children01.forEach(item03 => {
                    item03.CheckValue = false;
                  });
                }
              }
            });
          }
        }
      });
      this.checkedLine = [];
      this.checkedColumn = [];
    },
    handleCheckAllChangeTwo(value) {
      let arr =
        this.AllCheckArr[this.OneIndex].children[this.TwoIndex].children || [];
      let allarr = this.AllCheckArr;
      let children = [];
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (value) {
          element.CheckValue = true;
          this.checkedColumn.push(element.PName);
        } else {
          element.CheckValue = false;
          this.checkedColumn = [];
        }
        children.push(element);
      }
      if (arr.length > 0) {
        allarr.forEach((item01, index01) => {
          if (this.OneIndex == index01) {
            item01.children.forEach((item02, index02) => {
              if (index02 == this.TwoIndex) {
                item02.children = children;
              }
            });
          }
        });
      }
    },
    //多选框变化事件
    handleCheckedCitiesChangeTwo(value) {
      let arr = this.AllCheckArr[this.OneIndex].children[this.TwoIndex]
        .children;
      let length = arr.length || 0;
      let arrall = this.AllCheckArr;
      let children = [];
      if (value.length != length) {
        this.CheckAllTwo = false;
      } else {
        this.CheckAllTwo = true;
      }

      arr.forEach(element => {
        if (value.indexOf(element.PName) > -1) {
          element.CheckValue = true;
        } else {
          element.CheckValue = false;
        }
      });
      arrall.forEach((item01, index01) => {
        if (this.OneIndex == index01) {
          item01.children.forEach((item02, index02) => {
            if (index02 == this.TwoIndex) {
              item02.children = arr;
            }
          });
        }
      });
    },
    handleCheckAllChangeThree(value) {
      let arr = this.AllCheckArr[this.OneIndex].children[this.TwoIndex]
        .children01;
      if (arr.length > 0) {
        arr.forEach(element => {
          if (value) {
            element.CheckValue = true;
          } else {
            element.CheckValue = false;
          }
        });
      }
    },
    handleCheckedCitiesChangeThree(value) {
      let arr = this.AllCheckArr[this.OneIndex].children[this.TwoIndex]
        .children01;
      let length = arr.length || 0;
      let arrall = this.AllCheckArr;
      if (value.length != length) {
        this.CheckAllThree = false;
      } else {
        this.CheckAllThree = true;
      }

      if (value.length != length) {
        this.CheckAllTwo = false;
      } else {
        this.CheckAllTwo = true;
      }

      arr.forEach(element => {
        if (value.indexOf(element.PName) > -1) {
          element.CheckValue = true;
        } else {
          element.CheckValue = false;
        }
      });
      arrall.forEach((item01, index01) => {
        if (this.OneIndex == index01) {
          item01.children.forEach((item02, index02) => {
            if (index02 == this.TwoIndex) {
              item02.children01 = arr;
            }
          });
        }
      });
    },
    // 点击新增
    AddButton() {
      this.AllType = "2";
      this.checkedColumn = [];
      this.checkedLine = [];
      this.OneIndex = 0;
      this.TwoIndex = 0;
      this.AllCheckArr = [];
      //点击新增查询所有模块信息
      let json = {
        MN: "QueryPermissionByType",
        DataContent: {
          PType: "1"
        }
      };
      this.MIX_send(json);
    },
    //点击编辑
    ClickEdit(r) {
      this.ClickRId = r.RId;
      this.ClickRName = r.RName;
      this.OneIndex = 0;
      this.TwoIndex = 0;
      this.AllCheckArr = [];
      this.AllType = "3";
      this.InputThreeValue = r.RName;
      //点击编辑，请求所有的模块数据
      let json = {
        MN: "QueryPermissionByType",
        DataContent: {
          PType: "1"
        }
      };
      this.MIX_send(json);
    },
    //点击删除
    ClickDelete(r) {
      this.$confirm("是否删除此角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let json = {
            MN: "DelRole",
            DataContent: {
              RId: r.RId
            }
          };
          this.MIX_send(json);
        })
        .catch(() => {});
    },
    //点击返回
    ClickCancel() {
      this.$router.go(0);

      // this.AllType = "1";
      // let json_one = {
      //   MN: "QueryRole",
      //   DataContent: {
      //     KeyWord: "",
      //     PageIndex: "1"
      //   }
      // };
      // this.MIX_send(json_one);
      // if(this.AllType == '2'){
      //   console.log(this.MessageData)
      //   console.log(this.Operations)
      //   console.log(this.StateColumn)
      // }
    },
    //点击确定
    ClickDeter() {
      console.log(this.AllCheckArr);
      let FinalArr = [];
      if (this.AllCheckArr.length > 0) {
        this.AllCheckArr.forEach(value => {
          if (value.CheckValue) {
            FinalArr.push(value.PId);
          }
          if (value.children.length > 0) {
            value.children.forEach(v1 => {
              if (v1.CheckValue) {
                FinalArr.push(v1.PId);
              }
              if (v1.children.length > 0) {
                v1.children.forEach(v2 => {
                  if (v2.CheckValue) {
                    FinalArr.push(v2.PId);
                  }
                });
              }
              if (v1.children01 && v1.children01.length > 0) {
                v1.children01.forEach(v3 => {
                  if (v3.CheckValue) {
                    FinalArr.push(v3.PId);
                  }
                });
              }
            });
          }
        });
      }
      if (this.AllType == "2") {
        let PIds = FinalArr.join(",");
        let json = {
          MN: "AddRole",
          DataContent: {
            RName: this.InputOneValue,
            PId: PIds,
            Description: this.InputTwoValue
          }
        };
        this.MIX_send(json);
      } else {
        let PIds = FinalArr.join(",");
        let json = {
          MN: "UpdateRole",
          DataContent: {
            RId: this.ClickRId,
            RName: this.ClickRName,
            PId: PIds,
            Description: this.InputFourValue
          }
        };
        this.MIX_send(json);
      }
    },
    //分页
    current_change(currentPage) {
      let json_one = {
        MN: "QueryRole",
        DataContent: {
          KeyWord: "",
          PageIndex: currentPage
        }
      };
      this.MIX_send(json_one);
    },
    //形成数组
    CreatObjs(arr, id = false, last = false) {
      let AllCheckArr = this.AllCheckArr;
      let children = [];
      let sjsj = [];
      let obj = {};
      arr.forEach(item => {
        obj = {
          PId: item.PId,
          RId: item.RId || "",
          PName: item.PName,
          CheckValue: item.CheckValue || false,
          children: []
        };
        children.push(obj);
      });
      if (id && Array.isArray(id)) {
        if (id.length == 1) {
          AllCheckArr.forEach(element => {
            if (element.PId == id[0]) {
              element.children = children;
            } else {
              if (element.children.length > 0) {
              }
            }
          });
        } else {
          AllCheckArr.forEach(element => {
            if (element.PId == id[0]) {
              element.children.forEach(item => {
                if (item.PId == id[1]) {
                  if (last) {
                    item.children01 = children;
                  } else {
                    item.children = children;
                  }
                }
              });
            }
          });
        }
      } else {
        this.AllCheckArr = children;
      }
    }
  },
  mounted() {
    //请求表格数据
    let json_one = {
      MN: "QueryRole",
      DataContent: {
        KeyWord: "",
        PageIndex: "1"
      }
    };
    this.MIX_send(json_one);
  },
  watch: {
    "$store.state.Permission.MNvalue.QueryRole": function(data) {
      if (data.Code == "0") {
        this.total = data.TotalCount;
        this.roledata = data.ReturnData;
        if (this.roledata.length > 0 && this.AllType == "1") {
          //请求表格第一条模块信息
          let json = {
            MN: "QueryRolePermission",
            DataContent: {
              RId: this.roledata[0].RId,
              PType: "1"
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryRolePermission": function(data) {
      if (data.Code == "0") {
        this.CreatObjs(data.ReturnData);
        this.AllCheckArr.forEach(item => {
          item.CheckValue = true;
        });
        let json = {
          MN: "QueryRoleButtonPermission",
          DataContent: {
            RId: this.AllCheckArr[this.OneIndex].RId,
            PId: this.AllCheckArr[this.OneIndex].PId,
            PType: "2"
          }
        };
        this.MIX_send(json);
        if (this.AllType == "3") {
          this.MouduleArr01.forEach(item => {
            data.ReturnData.forEach(item02 => {
              if (item.PId == item02.PId) {
                item.CheckValue = true;
              }
            });
          });
          this.CreatObjs(this.MouduleArr01);
          let json = {
            MN: "QueryButtonPermissionByType",
            DataContent: {
              PId: this.AllCheckArr[this.OneIndex].PId,
              PType: "2"
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryRoleButtonPermission": function(data) {
      if (data.Code == "0") {
        if (this.AllType == "1") {
          this.CreatObjs(data.ReturnData, [
            this.AllCheckArr[this.OneIndex].PId
          ]);
          this.AllCheckArr[this.OneIndex].children.forEach(item => {
            item.CheckValue = true;
          });
          //请求第一条控件下的所有数据行，数据列信息
          let json_one = {
            MN: "QueryDataPermissionByType",
            DataContent: {
              PId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            }
          };
          this.MIX_send(json_one);
          //请求第一条控件下的已勾选数据行，数据列信息
          let json_two = {
            MN: "QueryRoleDataPermission",
            DataContent: {
              RId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].RId,
              PId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            }
          };
          this.MIX_send(json_two);
        } else if (this.AllType == "3") {
          this.MouduleArr02.forEach(item => {
            data.ReturnData.forEach(item02 => {
              if (item.PId == item02.PId) {
                item.CheckValue = true;
              }
            });
          });
          this.CreatObjs(this.MouduleArr02, [
            this.AllCheckArr[this.OneIndex].PId
          ]);
          let json = {
            MN: "QueryDataPermissionByType",
            DataContent: {
              PId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryRoleDataPermission": function(data) {
      if (data.Code == "0") {
        if (this.AllType == "1") {
          let Arr_one = data.ReturnData,
            ArrOne = [],
            ArrTwo = [];
          Arr_one.forEach(value => {
            if (value.PType == "4") {
              ArrOne.push(value.PName);
              this.checkedColumn = ArrOne;
              if (this.checkedColumn.length == this.StateColumn.length) {
                this.CheckAllTwo = true;
              } else {
                this.CheckAllTwo = false;
              }
            } else if (value.PType == "5") {
              ArrTwo.push(value.PName);
              this.checkedLine = ArrTwo;
              if (this.checkedLine.length == this.StateLine.length) {
                this.CheckAllThree = true;
              } else {
                this.CheckAllThree = false;
              }
            }
          });
        } else if (this.AllType == "3") {
          let arr01 = [];
          let arr02 = [];
          this.MouduleArr03.forEach(item => {
            data.ReturnData.forEach(item02 => {
              if (item.PId == item02.PId) {
                item.CheckValue = true;
              }
            });
            if (item.PType == "4") {
              arr01.push(item);
            } else if (item.PType == "5") {
              arr02.push(item);
            }
          });
          console.log(arr01);
          console.log(arr02);

          this.CreatObjs(arr01, [
            this.AllCheckArr[this.OneIndex].PId,
            this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
          ]);
          this.CreatObjs(
            arr02,
            [
              this.AllCheckArr[this.OneIndex].PId,
              this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            ],
            true
          );
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryDataPermissionByType": function(data) {
      if (data.Code == "0") {
        if (data.ReturnData.length > 0 && this.AllType == "1") {
          let Arr_one = data.ReturnData,
            ArrOne = [],
            ArrTwo = [],
            arr01 = [],
            arr02 = [];
          Arr_one.forEach((value, index) => {
            if (value.PType == "4") {
              ArrOne.push(value);
              arr01.push(value);
              this.StateColumn = ArrOne;
            } else if (value.PType == "5") {
              ArrTwo.push(value);
              arr02.push(value);
              this.StateLine = ArrTwo;
            }
          });
          this.CreatObjs(arr01, [
            this.AllCheckArr[this.OneIndex].PId,
            this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
          ]);
          this.CreatObjs(
            arr02,
            [
              this.AllCheckArr[this.OneIndex].PId,
              this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            ],
            true
          );
        } else if (data.ReturnData.length == "0") {
          // ====================
          console.log(this.AllCheckArr);
          this.checkedColumn = [];
          this.checkedLine = [];
        } else if (data.ReturnData.length > 0 && this.AllType == "2") {
          let Arr_one = data.ReturnData,
            ArrOne = [],
            ArrTwo = [];
          Arr_one.forEach((value, index) => {
            if (value.PType == "4") {
              ArrOne.push(value);
            } else if (value.PType == "5") {
              ArrTwo.push(value);
            }
          });
          this.CreatObjs(ArrOne, [
            this.AllCheckArr[this.OneIndex].PId,
            this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
          ]);
          this.CreatObjs(
            ArrTwo,
            [
              this.AllCheckArr[this.OneIndex].PId,
              this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
            ],
            true
          );
        } else if (data.ReturnData.length > 0 && this.AllType == "3") {
          this.MouduleArr03 = data.ReturnData;
          let json = {
            MN: "QueryRoleDataPermission",
            DataContent: {
              PId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId,
              RId: this.ClickRId
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryPermissionByType": function(data) {
      if (data.Code == "0") {
        this.CreatObjs(data.ReturnData);
        let json = {
          MN: "QueryButtonPermissionByType",
          DataContent: {
            PId: this.AllCheckArr[this.OneIndex].PId,
            PType: "2"
          }
        };
        this.MIX_send(json);
        if (this.AllType == "3") {
          this.MouduleArr01 = data.ReturnData;
          let json = {
            MN: "QueryRolePermission",
            DataContent: {
              RId: this.ClickRId,
              PType: "1"
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.QueryButtonPermissionByType": function(data) {
      if (data.Code == "0") {
        if (this.AllType == "2") {
          this.CreatObjs(data.ReturnData, [
            this.AllCheckArr[this.OneIndex].PId
          ]);
          //请求第一条控件的全部数据
          if (this.AllCheckArr[this.OneIndex].children[this.TwoIndex]) {
            let json = {
              MN: "QueryDataPermissionByType",
              DataContent: {
                PId: this.AllCheckArr[this.OneIndex].children[this.TwoIndex].PId
              }
            };
            this.MIX_send(json);
          }
        } else if (this.AllType == "3") {
          this.MouduleArr02 = data.ReturnData;
          let json = {
            MN: "QueryRoleButtonPermission",
            DataContent: {
              PId: this.AllCheckArr[this.OneIndex].PId,
              RId: this.ClickRId,
              PType: "2"
            }
          };
          this.MIX_send(json);
        }
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.AddRole": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "新增成功"
        });
        this.AllArr = [];
        this.AllType = "1";
        this.AllCheckArr = [];
        //请求表格数据
        this.InputOneValue = "";
        this.InputTwoValue = "";
        let json_one = {
          MN: "QueryRole",
          DataContent: {
            KeyWord: "",
            PageIndex: "1"
          }
        };
        this.MIX_send(json_one);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.DelRole": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "删除成功"
        });
        let json_one = {
          MN: "QueryRole",
          DataContent: {
            KeyWord: "",
            PageIndex: "1"
          }
        };
        this.MIX_send(json_one);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    },
    "$store.state.Permission.MNvalue.UpdateRole": function(data) {
      if (data.Code == "0") {
        this.$message({
          showClose: true,
          message: "编辑成功"
        });
        this.AllType = "1";
        this.InputThreeValue = "";
        this.InputFourValue = "";
        this.AllCheckArr = [];
        this.ClickRId = null;
        this.ClickRName = null;
        let json_one = {
          MN: "QueryRole",
          DataContent: {
            KeyWord: "",
            PageIndex: "1"
          }
        };
        this.MIX_send(json_one);
      } else {
        this.$message({
          showClose: true,
          message: data.Message
        });
      }
    }
  }
};
</script>

<style scoped>
#role {
  height: calc(100vh - 51px);
}
.operation {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}
.buttons {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.buttons > div {
  width: 90px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  background: #108cee;
}
.inputs {
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.inputs > div {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.check {
  width: 330px;
  height: 38px !important;
  margin-left: 80px;
  position: relative;
}
.check > input {
  height: 38px;
  border: none;
  line-height: 40px;
  width: 310px;
  border: 1px solid gray;
}
.check > i {
  position: absolute;
  right: 20px;
}
.AllStru {
  margin-top: 20px;
  height: calc(100vh - 111px);
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.tablebox {
  width: 400px;
  height: 100%;
  overflow-y: auto;
}
.boxtop {
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  border-left: 5px solid #108cee;
}
.AllRight {
  flex: 1;
  height: calc(100vh - 111px);
  overflow-y: auto;
  padding-left: 20px;
  display: flex;
}
.CurrentPage {
  margin-top: 50px;
}
.RightPermission {
  min-width: 150px;
  height: calc(100vh - 111px);
}
.PermissionTop {
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  min-width: 150px;
  border-left: solid 5px #108cee;
}
.PermissionData {
  min-width: 150px;
  height: calc(100vh - 156px);
  overflow-y: auto;
}
.PermissionData::-webkit-scrollbar {
  width: 2px;
}
.PermissionData::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.PermissionData::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.DataOne {
  height: 45px;
  line-height: 45px;
  padding-left: 25px;
}
.RightControls {
  min-width: 150px;
  height: calc(100vh - 111px);
}
.ControlsTop {
  min-width: 150px;
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  border-left: solid 5px #108cee;
}
.ControlsData {
  min-width: 150px;
  height: calc(100vh - 156px);
  overflow-y: auto;
}
.ControlsData::-webkit-scrollbar {
  width: 2px;
}
.ControlsData::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.ControlsData::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.DataTwo {
  height: 45px;
  line-height: 45px;
  padding-left: 25px;
}
.RightChecks {
  flex: 1;
  height: calc(100vh - 111px);
  overflow-y: auto;
}
.CheckTop {
  /* width: 100%; */
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  border-left: solid 5px #108cee;
}
.WidBoxs {
  margin-left: 20px;
  /* min-width: 1000px; */
  border: 1px solid gray;
}
</style>
